<template>
  <div id="header">
    <!--返回按钮-->
    <div class="header-return">
      <router-link to="/"><Icon type="ios-arrow-left"></Icon></router-link>
      <!--搜索-->
      <input type="text" placeholder="所搜店内商品">
    </div>
    <div class="seller-detail">
			<div class="avatar">
				<img src="./cat.jpg">
			</div>
    	<div class="seller-con">
    		<span class="seller-name">{{seller.name}}</span>
    		<span class="seller-description">{{seller.description}}/{{seller.deliveryTime}}分钟送达</span>
        <!-- render function，出了毛病，能正常显示但是报错。总之先注释掉吧orz -->
        <!--<span class="seller-supports"><i :class="iconMap[seller.supports[0].type]"></i>{{seller.supports[0].description}}</span>-->
    	</div>
      <!--收藏-->
      <div class="seller-collect" @click="collectClick">
        <Icon type="ios-heart-outline" :class="[collect?'on':' ']" v-show="!collect"></Icon><Icon type="ios-heart" :class="[collect?'on':' ']" v-show="collect"></Icon><p>{{collectStatus}}</p>
      </div>
    </div>
    <!-- 店铺公告 -->
    <p class="seller-bulletin" @click="show()"><img src="./bulletin@2x.png">{{seller.bulletin}}</p>
    <!-- 背景模糊层 -->
    <div class="seller-bg">
	    <span></span>
    	<img src="./bg.jpg">
    </div>
    <!-- 店铺详细介绍 -->
    <transition name="detail-fade">
      <div id="detail" v-show="detailShow">
        <!-- 背景层 -->
        <div class="detail-bg" @click="show()"><span></span><img src="./bg.png"></div>
        <!-- 店铺介绍 -->
        <div class="detail-con">
          <span class="d-n">{{seller.name}}</span>
          <div class="d-t"><i></i><span>优惠信息</span><i></i></div>
          <ul>
            <li v-for="(item,index) in seller.supports"><i :class="iconMap[index]"></i>{{item.description}}</li>
          </ul>
          <div class="d-t"><i></i><span>商家公告</span><i></i></div>
          <p class="d-b">{{seller.bulletin}}</p>
        </div>
        <!-- 关闭按钮 -->
        <div class="close" @click="show()">×</div>
      </div>
    </transition>
  </div>
</template>

<script type="text/ecmascript-6">
/*eslint-disable */
import Vue from 'vue'
export default{
  data () {
    return {
      detailShow: false,
      collect: false
    }
  },
  props: {
    seller: {
  	    type: Object
    }
  },
  methods: {
    show () {//显示隐藏
      this.detailShow = !this.detailShow
    },
    collectClick () {
      this.collect = !this.collect
      let collect = window.localStorage.collect// 缓存收藏信息
      window.localStorage.collect = this.collect
      console.log(this.collect)
    },
    text () {
      let collect = window.localStorage.collect// 读取收藏信息
      if(!collect){
        console.log('tan90')
      }else{
        this.collect = collect
        console.log(this.collect)
//        this.$set('collect','collect')
      }
    }
  },
  computed:{
    collectStatus(){
      return this.collect?'已收藏':'收藏'
    }
  },
  created () {
    this.iconMap = ['decrease', 'discount', 'guarantee', 'invoice', 'special']
    this.text()
  }
}
</script>

<style>
  #header{text-align: center;line-height: 20px; height: 136px;}
  #header .seller-detail{padding: 8px ; display: flex;position: relative;z-index: 1;align-items: center;}
  #header .seller-bg{width: 100%; position: absolute;top: 0; height: 146px; overflow: hidden;}
  #header .seller-bg span{display: block; width: 100%; height: 100%; background: rgba(7,17,27,0.3); position: absolute; top: 0;}
  #header .seller-bg img{width: 100%; z-index: -9;-webkit-filter: blur(5px);position:relative;margin-top: -50px;height: 200px;}
  #header .seller-detail .avatar{ width: 64px; height: 64px;border-radius: 50%;overflow: hidden;}
  #header .seller-detail .avatar img{height: 100%;}
  #header .seller-con {color: #fff; margin-left: 16px;flex: 1;}
  #header .seller-con span{display: block; text-align: left;}
  #header .seller-con .seller-name{font-weight: bold;font-size: 16px;}
  #header .seller-con .seller-description{font-size: 12px;}
  #header .seller-bulletin{position: absolute; height: 28px; font-size: 12px; width:100%;left: 0;background: rgba(7,17,27,0.2); color: #fff; line-height: 28px; padding-left: 2%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap; z-index: 1; padding-right: 2%;}
  #header .seller-bulletin img{ height: 12px; margin-right: 6px;vertical-align: sub;}
  #header .seller-con i{margin-right: 6px;}
  #header .seller-con i.decrease{width: 14px; height: 14px; display: inline-block; background: url('decrease_4@2x.png'); background-size: 100%; vertical-align: text-top;}
  #header .seller-con i.discount{width: 14px; height: 14px; display: inline-block; background: url('discount_4@2x.png'); background-size: 100%; vertical-align: text-top;}
  #header .seller-con i.guarantee{width: 14px; height: 14px; display: inline-block; background: url('guarantee_4@2x.png'); background-size: 100%; vertical-align: text-top;}
  #header .seller-con i.invoice{width: 14px; height: 14px; display: inline-block; background: url('invoice_4@2x.png'); background-size: 100%; vertical-align: text-top;}
  #header .seller-con i.special{width: 14px; height: 14px; display: inline-block; background: url('special_4@2x.png'); background-size: 100%; vertical-align: text-top;}
  #header .seller-supports{font-size: 12px;}
  /*详情*/
  #detail{position: fixed;top: 0 ;z-index: 999; width: 100%; height: 100%; overflow: hidden;font-family: "微软雅黑"}
  #detail .detail-bg{ height: 100%; position: absolute; top: 0;}
  #detail .detail-bg span{ display: block; width: 100%; height: 100%; background:rgba(7,17,27,0.5); position: absolute; z-index: 1;}
  #detail .detail-bg img{ height: 100%; margin-left: -70%;-webkit-filter: blur(10px);}
  #detail .close{color: #fff;position: absolute;z-index: 9;font-weight: bold; width: 100%; text-align: center;bottom: 5%; font-size: 36px; opacity: 0.5;}
  #detail .detail-con{ position: relative; z-index: 1; color: #fff; margin:0 36px ;}
  #detail .detail-con .d-n{color:#fff;font-weight: bold;font-size: 16px; display: block;margin-top: 64px;}
  #detail .detail-con .d-b{font-size: 12px;text-align: left;line-height: 24px;}
  #detail .detail-con .d-t{display: flex;align-items: center; margin-top: 28px;margin-bottom: 24px;}
  #detail .detail-con .d-t span{font-weight: bold;font-size: 14px; padding: 0 12px;}
  #detail .detail-con .d-t i{flex: 1; width: 100%; height: 1px; background:#999;}
  #detail .detail-con li{ font-size: 12px;text-align: left;line-height: 24px;}
  #detail .detail-con i{margin-right: 6px;}
  #detail .detail-con i.decrease{width: 14px; height: 14px; display: inline-block; background: url('decrease_4@2x.png'); background-size: 100%; vertical-align: text-top;}
  #detail .detail-con i.discount{width: 14px; height: 14px; display: inline-block; background: url('discount_4@2x.png'); background-size: 100%; vertical-align: text-top;}
  #detail .detail-con i.guarantee{width: 14px; height: 14px; display: inline-block; background: url('guarantee_4@2x.png'); background-size: 100%; vertical-align: text-top;}
  #detail .detail-con i.invoice{width: 14px; height: 14px; display: inline-block; background: url('invoice_4@2x.png'); background-size: 100%; vertical-align: text-top;}
  #detail .detail-con i.special{width: 14px; height: 14px; display: inline-block; background: url('special_4@2x.png'); background-size: 100%; vertical-align: text-top;}
  /*详情过渡*/
  .detail-fade-enter-active {transition: all .8s; opacity: 1}
  .detail-fade-leave-active {transition: all 1s;transform: translateY(-100%);opacity: 0}
  .detail-fade-enter{transform: translateY(-100%) scale(0);opacity: 0}
  .header-return{margin:0 8px;position: relative; z-index: 1;display: flex; align-items: center;margin-top: 8px;}
  .header-return a{display: inline-block;margin-right: 20px;opacity: 0.8}
  .header-return i{font-size: 28px; line-height: 28px;color: #fff;}
  .header-return input{ vertical-align: top;border-radius: 500px;padding-left: 35px;line-height: 24px;font-size: 12px; background: #f1f1f1;}
  .seller-collect{width: 60px;border-left: #c8c8c8 1px solid;padding-left: 10px;}
  .seller-collect i{font-size: 24px;color: #fff;}
  .seller-collect i.on{color: #fe6732;}
  .seller-collect p{color: #fff;}
</style>
